<%@page import="java.security.Principal" %>
<%@page import="waffle.windows.auth.WindowsAccount" %>
<%@page import="waffle.servlet.WindowsPrincipal" %>
<%@page import="com.sun.jna.platform.win32.Secur32" %>
<%@page import="com.sun.jna.platform.win32.Secur32Util" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Laundry : Book a slot</title>
<link href="js/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker({ onSelect: function(dateText, inst) { execWs(dateText); } });
    $('#MyBookings').hide(); 
    $('#bookDiv').hide();    
    $('#outersidePane').hide();
    $('#innersidePane').hide();        
    getUser();
  });
  function execWs(dateText){
	  //alert(dateText);
	   var requestUrl ="rest/book/free?when="+dateText;   
		$.ajax({
			type: "GET",		
			url:requestUrl ,			
			contentType: "application/html; charset=utf-8",
			dataType: "JSON",
			success: function(data) {	
			$('option', $('#slots')).remove()
	    	  //alert(data[1].slot.from );    
	    	  //$('#slots').append('<option value="'+data[0].slot.id+'" >'+data[0].slot.from+'-'+data[0].slot.to+'</option>');
	          for(var i=0;i<data.length;i++){   
	        	      	  
	        	  $('#slots').append('<option value="'+data[i].slot.id+'" >'+data[i].slot.from+'-'+data[i].slot.to+' ( '+data[i].count+' )'+'</option>');     	
	         }
	          if(data.length==0){
	        	  $('#slots').append('<option value="-1" >No free slots</option>');
	        	  $('#book').attr("disabled", true);
	          }              
	          else{
	        	  $('#book').attr("disabled", false);
	          }
			},
			timeout: 30000,
			error: function(request, error) {
			alert( error);
			},
			cache:false,
			async: true
			});	

	     /*     
      $.getJSON(requestUrl,
      function(data) {
    	  $('option', $('#slots')).remove()
    	  //alert(data[1].slot.from );    
    	  //$('#slots').append('<option value="'+data[0].slot.id+'" >'+data[0].slot.from+'-'+data[0].slot.to+'</option>');
          for(var i=0;i<data.length;i++){   
        	      	  
        	  $('#slots').append('<option value="'+data[i].slot.id+'" >'+data[i].slot.from+'-'+data[i].slot.to+' ( '+data[i].count+' )'+'</option>');     	
         }
          if(data.length==0){
        	  $('#slots').append('<option value="-1" >No free slots</option>');
        	  $('#book').attr("disabled", true);
          }              
          else{
        	  $('#book').attr("disabled", false);
          }    	                                            
      });*/
     
  }

  function bookASlot(){
	  var emp=$('#userId').text();
	  //alert(emp);
	  var slot=$('#slots').val();
	  var dtText =$("#datepicker").val();
	  //alert($("#datepicker").val());
	  var requestUrl ="rest/book/bookslot?dt="+dtText;
	  requestUrl+="&slot="+slot+"&emp="+emp;
	  $.ajax({
			type: "GET",		
			url:requestUrl ,			
			contentType: "application/html; charset=utf-8",
			dataType: "JSON",
			success: function(data) {	
				alert(" Machine id Booked : "+data.id);
				execWs(dtText);
			},
			timeout: 30000,
			error: function(request, error) {
			alert( error);
			},
			cache:false,
			async: true
			});	
	  /*$.getJSON(requestUrl,function(data){ 
				alert(" Machine id Booked : "+data.id)
				execWs(dtText);
		  });*/
  }

  function getMyBookings(){	  
	  $('#bookDiv').hide();
	  $('#MyBookings').show();
	  $('#loading').attr('src','img/ajax-loader.gif');
	  var requestUrl ="rest/book/bookings?eId="+$('#userId').text();

	  $.ajax({
			type: "GET",		
			url:requestUrl ,			
			contentType: "application/html; charset=utf-8",
			dataType: "JSON",
			success: function(data) {	
		  if(data.length!=0){
				$('#MyBookings').html('<table border="1" id="bookingDetails" style="vertical-align: middle;"><tr><td align="center" valign="middle" > <b> Date </b></td><td align="center" valign="middle" > <b> From </b> </td><td align="center" valign="middle" > <b> To </b> </td><td align="center" valign="middle" > <b> Machine </b> </td></tr></table>');
			  	for(var i=0;i<data.length;i++){
					  $('#bookingDetails tr:last').after(" <tr> <td>"+data[i].date+" </td> <td> "+data[i].slot.from+" </td><td> "+data[i].slot.to+ "</td><td>"+data[i].machineId+"</td>");	   
			  	}
			}
			else{
				$('#MyBookings').html('No bookings found!');
			}
			},
			timeout: 30000,
			error: function(request, error) {
			alert( error);
			},
			cache:false,
			async: true
			});	
	/*	
	  $.getJSON(requestUrl,function(data){ 
		if(data.length!=0){
			$('#MyBookings').html('<table border="1" id="bookingDetails" style="vertical-align: middle;"><tr><td align="center" valign="middle" > <b> Date </b></td><td align="center" valign="middle" > <b> From </b> </td><td align="center" valign="middle" > <b> To </b> </td><td align="center" valign="middle" > <b> Machine </b> </td></tr></table>');
		  	for(var i=0;i<data.length;i++){
				  $('#bookingDetails tr:last').after(" <tr> <td>"+data[i].date+" </td> <td> "+data[i].slot.from+" </td><td> "+data[i].slot.to+ "</td><td>"+data[i].machineId+"</td>");	   
		  	}
		}
		else{
			$('#MyBookings').html('No Reservations found!');
		}
			
			//execWs($("#datepicker").val());
	  });*/
	   
	   //alert("hi");
  }
	 function getUser(){
		 var requestUrl="rest/test/req";
		 $.ajax({
				type: "GET",		
				url:requestUrl ,			
				contentType: "application/html; charset=utf-8",
				dataType: "HTML",
				success: function(arg) {	
					$('#userId').html(arg); 	
					$('#outersidePane').show();
				    $('#innersidePane').show();
				},
				timeout: 30000,
				error: function(request, error) {
				alert( error);
				},
				async: true
				});
	 } 
	 function drwawBook(){
		 $('#MyBookings').hide();
		 $('#bookDiv').show();
		 $('#book').attr("disabled", true);
	 }
  </script>
</head>
<body style="font-size:62.5%;">  
<% /*String user= request.getRemoteUser();

 user= user.replaceFirst("ITLINFOSYS\\\\",""); */%>
<div style="height: 80px;text-align: center;border-bottom:thin;border-bottom-style:solid; text-align: center;" id="headerDiv">
<label > <H1> Laundromat Booking System </H1>  </label>
</div>
<div style="height:500px;" align="center">
<div id="welcomeUserDiv" style="text-align: left;height: 20px; vertical-align: middle;font-size: small" >Hello, <label id="userId" ></label></div>
<div id="outersidePane"  align="center" style="width: 30%;height: 500px;float: left;text-align: center;border-right:thin;border-right-style: solid;" >
<div id="innerSidePane"  style="margin:0px auto;width: 50%;text-align: left;font-size: 14px;font-weight: bold;"> 
<br><br><a onclick="drwawBook();" href="javascript:void();"> Book a slot</a>
<br><br><a onclick="getMyBookings();" href="javascript:void();"> My Bookings</a>
<br><br><a href="admin.jsp"> Go to Admin Page</a>
</div>
</div>
<div id="mainPane" style="text-align: left;height: 500px;" >
<div id="MyBookings" style="overflow:auto;height:300px; vertical-align: middle; font-size: small;" align="justify" ><img id="loading" /></div> 
<div id="bookDiv" style="vertical-align: top;">
	<table border="0" > 	
	<tr>
		<td colspan="2" align="center" valign="middle" height="200px" ><div id="datepicker" ></div></td>			
	</tr>
	<tr> 
		<td width="180px" align="center" valign="top"> 
			<select id="slots" name="slots" >
				<option value="-1">No date selected </option>
			</select> 
		</td>
		<td align="center" valign="top"><button id="book"  onclick="bookASlot();"> Book slot </button></td>			
	</tr> 		
	</table>
</div>			
</div>

</div>
</body>
